

<template>
  <div class="app-container">

    <div id="divSearch" ref="divSearch">
      <el-form :inline="true" :model="Search" class="demo-form-inline">
        <el-form-item label="日期" prop="Search">

          <el-date-picker v-model="Search.CreatedOn"
                          type="daterange"
                          start-placeholder="开始日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          end-placeholder="结束日期"
                          :default-time="['00:00:00', '00:00:00']" />

        </el-form-item>
        <el-form-item label="编号" prop="Search">

          <el-input v-model.trim="Search.RecommendCostAppyNo" placeholder="编号" />

        </el-form-item>
        <el-form-item>


     <el-form-item label="状态" prop="Search">

           <el-select v-model="Search.Status" placeholder="请选择">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
     
    </el-option>
  </el-select>

        </el-form-item>

 <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">查询</el-button>
          <el-button type="success" icon="el-icon-download" size="mini"  >导出</el-button>
          <el-button type="warning" icon="el-icon-circle-plus-outline" @click="handeAdd" size="mini"  >新增</el-button>

        </el-form-item>
      </el-form>
    </div>

    <el-table :data="DataList" :height="tableHeight" style="width: 100%;margin-top: 10px;" border @sort-change="sortChange">

      <el-table-column align="center" label="申请编号">
        <template slot-scope="scope">
          {{ scope.row.RecommendCostAppyNo }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门">
        <template slot-scope="scope">
          {{ scope.row.Organizename }}
        </template>
      </el-table-column>

    <el-table-column align="header-center" label="审核状态">
        <template slot-scope="scope">
          {{ scope.row.BillStateName }}
        </template>
      </el-table-column>


 <el-table-column align="header-center" label="当前审核人">
        <template slot-scope="scope">
          {{ scope.row.NextAduitManName }}
        </template>
      </el-table-column>



      <el-table-column align="header-center" label="创建人">
        <template slot-scope="scope">
          {{ scope.row.CreatedByName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.CreatedOn }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="最后签审时间">
        <template slot-scope="scope">
          {{ scope.row.ModifyDate }}
        </template>
      </el-table-column>
     
      <el-table-column align="center" fixed="right" width="150" label="操作">
        <template slot-scope="scope">
                   	<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope)" circle></el-button>
				   <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope)"  circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="sizes, prev, pager, next,total"
                   :page-size="Search.pageSize"
                   :total="Search.total"
                   @current-change="pageChange" />


<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'创建'" width="93%">
        <el-form :model="name" label-width="80px" label-position="left">
          <v-RecommendCostRecordForm v-bind:inputName='inputName'></v-RecommendCostRecordForm>
        </el-form>

      </el-dialog>

  </div>




</template>

<script>
  import path from 'path'
  import { deepClone } from '@/utils'
  import { getDataList, updateForm, DeleteForm } from '@/api/RecommendCostForm'
  import vRecommendCostRecordForm from './RecommendCostRecordForm'
  // 默认的编辑字段
  const defaultObject = {

  }


   export default {
    name: "DataList",

    data() {
      return {
          cities: [{
          value: '',
          label: '请选择'
        },{
          value: '0',
          label: '草稿'
        }, {
          value: '1',
          label: '审核中'
        }, {
          value: '2',
          label: '结案'
        }, {
          value: '3',
          label: '作废'
        }],
        value: '',
          tableHeight: (() => (document.documentElement.clientHeight > 768 ? 500 : 468))(),
         RecommendCostRecordForm: "",
        inputName: "",
        EditObj: [],
        DataListCost: [],
        DataList: [],//队列的列表 在el-table中用
        dialogVisible: false,
        Search: {// 查询条件
          total: 0, // 总记录数
          pageSize: 10, // 一页显示的记录数
          page: 1, // /当前页码
          RNO: '003', // 表编号  根据Controller中对应的表编号
          jsWhere: ''// 自定义条件
        }
      }
    },
    computed: {
      routesData() {
        return this.routes
      }
    },
    created() {
      // Mock: get all routes and roles list from server

      this.getDataList()
    },
    methods: {
      pageChange(page) { // 翻页
        this.Search.page = page

        this.getDataList()
      },
      async getDataList() { // 获取列表数据，通用
        const res = await getDataList({ data: JSON.stringify(this.Search) })

        this.DataList = res.data.Table //将data 中的数据放到DataList中
        this.Search.total = res.data.Table1[0].RecordCount
        
      },
      sortChange: function (column) {
        // column, prop, order,排序，通用
        
        this.Search.sort = column.prop + ' ' + column.order

        this.getDataList()
      },
      handeAdd() { // 新建

       
         let routeUrl = this.$router.push({
          path: "./RecommendCostForm",
          query: { billID: "", IsPostBack: false }
        });
        window.open(routeUrl.href, '_top');

      },
      handleEdit(scope) { // 修改
      let routeUrl = this.$router.push({
          path: "./RecommendCostForm",
          query: { billID: scope.row.RecommendCostAppyNo, IsPostBack: false }
        });
        window.open(routeUrl.href, '_top');


        this.inputName = scope.row.RecommendCostAppyNo;

      },
      handleDelete({ $index, row }) {
        this.$confirm("确定作废该记录吗?", "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
           
            const result = await DeleteForm({ billID: row.RecommendCostAppyNo })


            if (result.code === 20000) {
              this.getDataList();

            this.$message({
              type: "success",
              message: "作废成功!"
            });
            } else {
             

            this.$message({
              type: "error",
              message: "已作失败!"
            });
            }

            
          })
          .catch(err => {
            console.error(err);
          });
      }
    
    }
  }

  </script>

<style lang="scss" scoped>
  .app-container {
    .EditObjs-table

  {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }
  }
</style>
